<div class="data_box">
  <div class="register_step">
    <div style="cursor:pointer;" class="flex align_center" (click)="navOne(1)">
      <div class="circle w20 h20 step_circle"
        [ngClass]="{'actives':navOnes === true,'step_circle_active': dataStep === 1 }">1</div>
      <span [ngClass]="{'activeTitle': navOnes === true}">标签配置</span>
      <div class="step_line" [ngClass]="{'activeLine': navTwos === true}"></div>
    </div>
    <div style="cursor:pointer;" class="flex align_center" (click)="navTwo(2)">
      <div class="circle w20 h20 step_circle "
        [ngClass]="{'actives': navTwos === true,'step_circle_active': dataStep === 2 }">2</div>
      <span [ngClass]="{'activeTitle': navTwos === true}">导入数据</span>
      <div class="step_line" [ngClass]="{'activeLine': navThrees === true}"></div>
    </div>
    <div style="cursor:pointer;" class="flex align_center" (click)="navThree(3)">
      <div class="circle w20 h20 step_circle"
        [ngClass]="{'actives': navThrees === true,'step_circle_active': dataStep === 3 }">3</div>
      <span [ngClass]="{'activeTitle': navThrees === true}">人工标注</span>
      <div class="step_line" [ngClass]="{'activeLine': navFours === true}"></div>
    </div>
    <div style="cursor:pointer;" class="flex align_center" (click)="navFour(4)">
      <div class="circle w20 h20 step_circle "
        [ngClass]="{'actives': navFours === true,'step_circle_active': dataStep === 4 }">4</div>
      <span [ngClass]="{'activeTitle': navFours === true}">标注结果评估</span>
    </div>
  </div>
  <div *ngIf="dataStep==1" class="flex flex_column flex_1 data_table_box">
    <div class="bg_white flex_1 ai_box">
      <div class="flex align_center justify_space">
        <div class="flex align_center">
          <div class="add_project_btn btn_hand" (click)="showModal()">新建标签</div>
          <div class="add_project_msg">您还可以新建<span>{{TagLength}}</span>个标签</div>
        </div>
        <div class="flex align_center">
          <div>
            <nz-input-group [nzSuffix]="suffixIconSearch">
              <input type="text" nz-input placeholder="请输入标签名称" [(ngModel)]="seekTagValue" (ngModelChange)="seekTag($event)"/>
              <!-- (ngModelChange)="seekTag($event)" -->
            </nz-input-group>
            <ng-template #suffixIconSearch>
              <i nz-icon nzType="search" (click)="seekTag()"></i>
            </ng-template>
          </div>
          <div class="refresh_box" (click)="getTagList()" style="cursor:pointer;">
            <img src="assets/images/icon_refresh.png" alt="">
          </div>
        </div>
      </div>

      <nz-table #basicTable2 [nzData]="TagList" class="mgt15">
        <thead>
          <tr>
            <th style="background-color: #F2F5FC;" nzWidth="55%">标签名称</th>
            <th style="background-color: #F2F5FC;" [nzSortFn]="createTimeCompare" [nzSortOrder]="'descend'" [nzSortDirections]="['descend','ascend']">新建时间</th>
            <th style="background-color: #F2F5FC;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable2.data" class="editable-row">
            <td>
              <div class="editable-cell edit_hover" [hidden]="editId === data.label_id" (click)="startEdit(data)">
                {{  data.label_name }}<img src="assets/images/icon_edit_h.png" alt="" class="edit_img hidden icon-show">
              </div>
              <div [hidden]="editId !== data.label_id" style="position: relative;">
                <input type="text" nz-input (blur)="stopEdit(data.label_id)"
                  [ngClass]="{'borderReds':EditLabelName.length === 50}" [(ngModel)]="EditLabelName" maxlength="50" />
                <span *ngIf="EditLabelName.length === 50" class="NameHint">最大字符长度为50</span>
              </div>
            </td>
            <td>{{ data.update_time }}</td>
            <td>
              <a (click)="deleteTag(data.label_id)">删除</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
  <!-- 添加文件 -->
  <div *ngIf="dataStep==2" class="flex flex_column flex_1 data_table_box">
    <div class="bg_white flex_1 ai_box">
      <div class="flex align_center justify_space">
        <div class="flex align_center">
          <div class="add_project_btn btn_hand" (mouseleave)="mouseleave()" (click)="showAddProjectBox()">上传 <img
              [hidden]="!projectBoxShow" src="assets/images/icon_triangle_b_down.png" alt="">
            <img [hidden]="projectBoxShow" src="assets/images/icon_triangle_b_top.png" alt="">
            <div class="add_peoject_sel_box" *ngIf="projectBoxShow">
              <div class="add_peoject_sel_option" (click)="fileInput.click()">文件 <input type="file"
                  style="display:none;" #fileInput (change)=getFile($event) /></div>
              <div class="add_peoject_sel_option" (click)="fileFolderInput.click()">文件夹 <input type="file"
                  style="display:none;" (change)=getFileFolder($event) #fileFolderInput webkitdirectory /> </div>
            </div>
          </div>
          <div class="add_project_msg">仅支持上传格式为word、pdf、txt的文件，单次最多支持100个文件且文件大小不超过20M。</div>
        </div>
        <div class="flex align_center">
          <div>
            <nz-input-group [nzSuffix]="suffixIconSearch">
              <input type="text" nz-input placeholder="请输入文件名称" [(ngModel)]="seekFileValue" (ngModelChange)="seekFile($event)"/>
            </nz-input-group>
            <ng-template #suffixIconSearch>
              <i nz-icon nzType="search" (click)="seekFile()"></i>
            </ng-template>
          </div>
          <div class="refresh_box" (click)="getFileList()" style="cursor:pointer;">
            <img src="assets/images/icon_refresh.png" alt="">
          </div>
        </div>
      </div>

      <nz-table #basicTable [nzData]="listOfFileData" class="mgt15">
        <thead>
          <tr>
            <th style="background-color: #F2F5FC;">编号</th>
            <th style="background-color: #F2F5FC;" nzWidth="35">文件名称</th>
            <th [nzSortFn]="fontSizeCompare" [nzSortOrder]="'descend'" [nzSortDirections]="['descend','ascend']">文件大小
            </th>
            <th style="background-color: #F2F5FC;"
              [nzFilters]="[{ text: '未标注', value: '0' },{ text: '已标注', value: '1' }]" [nzFilterMultiple]="false"
              [nzFilterFn]="fileFilterFn">标注状态
            </th>
            <th [nzSortFn]="timeCompare" [nzSortOrder]="'descend'" [nzSortDirections]="['descend','ascend']">上传时间</th>
            <th style="background-color: #F2F5FC;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data;let i = index" class="editable-row">
            <td>{{ i+1}}</td>
            <td>{{ data.file_name }}</td>
            <td>{{ data.file_size }}</td>
            <td>{{ data.status=="0"?"未标注":"已标注" }}</td>
            <td>{{ data.upload_time }}</td>
            <td>
              <a (click)="markFile(data.file_id)">标注</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="deleteFile(data.file_id)">删除</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
  <!-- 人工标注 -- 新 -->
  <div *ngIf="dataStep==3" class="flex flex_column flex_1 data_table_box">

    <div class="bg_white flex flex_1 ai_box" style="width: 100%;height: 100%;">

      <!-- 左侧展示 -->
      <div class="leftBox2">
        <!-- 左侧title容器 -->
        <div class="leftTitleBox" style="min-height: 36px;">
          <!-- 左侧title -->
          <h3>{{currFile.file_name}}</h3>
          <!-- 右侧button -->
          <div class="rightBtn">
            <span class="btn_hand" style="margin-right: 16px;"><i nz-icon nzType="double-left"
                nzTheme="outline"></i>&nbsp;&nbsp;上一个</span>
            <span class="btn_hand">下一个&nbsp;&nbsp;<i nz-icon nzType="double-right" nzTheme="outline"></i></span>
          </div>
        </div>
        <!-- 左侧内容容器 -->
        <div class="leftContent2">
          <!-- 左侧标签展示区 [ngClass]="{'left_tag_active': data}"-->
          <div class="leftContentTag2">
            <div class="leftTag"  (click)="gotoPage(data.page)" *ngFor="let data of fileListData.catalog">{{data.node_text}}</div>
          </div>
          <!--左侧内容展示-->
          <div class="pdfContent2" *ngIf="fileType == 'pdf'">
            <nz-spin *ngIf="isSpinning" [nzSpinning]="isSpinning" style="width: 100%;height: 100%;">
            </nz-spin>
            <div *ngIf="!isSpinning" class="mark_pdf_box">
              <div class="mark_pdf_content_box">
                <img src="assets/images/icon_previous_page.svg" (click)="previousPage()" class="pdf_page btn_hand" alt="">
                <div class="flex_1 pdf_content_box">
                  <app-diypdf ref="pdfDetail" 
                  [pdf_Size]="pdfSize" 
                  [pdf_Data]="pdfData" 
                  [openDraw]="isCanDraw"
                  [changePage]= "targetPage" 
                  [highBlock]="highlight" class="flex_1" (updateHL)="HLChange($event)"
                    (deletElementPoint)="deletElementPoint($event)" (deleteDrawRectList)="deleteDrawRectList($event)"
                    (nextStep)="nextStep($event)"
                    (updatePage)="getCurrPage($event)"
                    ></app-diypdf>
                </div>
                <img src="assets/images/icon_next_page.svg" (click)="nextPage()" class="pdf_page btn_hand" alt="">
                <div class="mark_zoom">
                  <img src="assets/images/icon_zoom_out.svg" (click)="addScale()"  style="margin-bottom: 8px;" alt="">
                  <app-diyprogress 
                  [maxMin] ="[1.5,0.5]"
                  [setPercent] = "targetScale"
                  (updatePercent)= "changePercent($event)"
                  class="diyprogress"></app-diyprogress>
                  <img src="assets/images/icon_zoom_in.svg" (click)="subScale()" style="margin-top: 8px;" alt="">
                </div>
                
              </div>
             
              <div class="mark_pdf_page_box">
            <nz-pagination (nzPageIndexChange)="pageChange($event)"  [nzPageIndex]="currentPage" [nzPageSize]="1" [nzTotal]="allPages" [nzSize]="'small'" [nzShowTotal]="totalTemplate"></nz-pagination>
              <ng-template #totalTemplate let-total>总页数： {{ total }} </ng-template>
              </div>
            </div>

            <!--  -->


          </div>

          <div class="pdfContent2" *ngIf="fileType == 'txt'">
            <nz-spin [nzSpinning]="isSpinning" style="width: 100%;height: 100%;">
              <app-diytxt [txt_Data]="pdfData" [openDraw]="isCanDraw" (updateTxt)="txtBlockChange($event)"
                [highBlock]="highlight"></app-diytxt>
            </nz-spin>
          </div>
        </div>
      </div>
      <div class="rightBox2">
        <!-- 右侧title容器 -->
        <div class="rightTitlebox">
          <h3>标注信息</h3>
        </div>
        <!-- 右侧内容容器 -->
        <div class="rightContent">
          <div class="mark_box">
            <div class="rightList" *ngFor="let item of fileTagData;let itemIndex = index">
              <div class="mark_add_box">
                <div class="mark_label_box">{{item.label_name}}</div>
                <div class="mark_add_msg btn_hand" (click)="addFileValue(itemIndex)">
                  <img src="assets/images/icon_add.png" style="height: 16px;width: 16px;" alt="">
                  添加Value
                </div>
              </div>
              <div class="mark_value_box" *ngFor="let itemValue of item.values;let blocksIndex = index">
                <div class="mark_title_box">
                  Value
                  <div class="mark_title_img">
                    <img class="btn_hand" style="margin: 5px 8px 5px 8px; width: 16px; height: 16px;" src="assets/images/selects.png"
                      alt="" (click)="selectPdf(itemIndex,blocksIndex)">
                    <span class="editBtn btn_hand" (click)="changeBlocks(itemIndex,blocksIndex)"></span>
                    <span class="deleteBtn btn_hand" (click)="deleteBlocks(itemIndex,blocksIndex)"></span>
                  </div>
                </div>
                <div class="mark_block_box" *ngFor="let item2 of itemValue.blocks;let blockIndex = index">
                  {{blockIndex+1}}. <input nz-input placeholder="default size" nzSize="default"
                    [ngClass]="{'input_not_edit': !itemValue.isCanEdit}" [readonly]="!itemValue.isCanEdit "
                    [(ngModel)]="item2.update_text" class="mark_block_input" />
                  <img class="mark_block_input_del btn_hand" (click)="deleteBlockNew(itemIndex,blocksIndex,blockIndex)"
                    src="assets/images/icon_delete.png" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="btn_box">
            <div class="btn_save btn_hand" (click)="tagSave()"> 保存</div>
          </div>
          <!--  *ngFor="let data of fileTagData.data" -->
          <!-- 标注选中区域 -->
          <!-- <div class="rightList" *ngFor="let item of fileTagData;let itemIndex = index"> -->
          <!-- 标注选中区域头部 -->
          <!-- <div class="rightListTop">
              <img src="assets/images/icon_add.png" (click)="addBlock(itemIndex)"
                alt=""><span>{{item.label_name}}</span>
            </div> -->
          <!-- 标注选中区域内容 -->
          <!-- <div class="rightListContent clearfix" *ngFor="let item2 of item.values;let blockIndex = index">
              <span class="valueSpan" *ngIf="i ==0">value</span> -->
          <!-- 选中内容容器 -->
          <!-- <div class="valueBox">
                <img style="margin: 5px 20px 5px 8px; width: 16px; height: 16px;" src="assets/images/selects.png" alt=""
                  (click)="selectPdf(itemIndex,blockIndex)">
                <div class="valueBox_block"> -->
          <!-- <div> <span>大兴骏才2号私募证券投资基金基金</span> <span>大兴骏才2号私募证券投资基金基金</span></div> -->
          <!-- <span class="SpanContent">{{getBlocksTxt(item2.blocks)}}</span> -->
          <!-- <span>1111111111111111111111111111111111111111111111111111111111</span> -->
          <!-- </div> -->
          <!-- hover 显示 -->
          <!-- <div class="ShowBox"> -->
          <!--保存按钮 与编辑按钮互斥 -->
          <!-- <span *ngIf="item2.isCanBox" class="addBtn" (click)="saveBlocks(itemIndex,blockIndex)"></span> -->
          <!-- 编辑按钮 -->
          <!-- <span *ngIf="!item2.isCanBox" class="editBtn" (click)="changeEdit(itemIndex,blockIndex)"></span> -->
          <!-- 删除按钮 -->
          <!-- <span class="deleteBtn" (click)="deleteBlock(itemIndex,blockIndex)"></span> -->
          <!-- </div>
              </div>
            </div> -->
          <!-- </div> -->
        </div>
      </div>

    </div>
  </div>
  <!-- 人工标注 -->
  <div *ngIf="false" class="flex flex_column flex_1 data_table_box">
    <div class="bg_white flex_1 ai_box" style="width: 100%;">
      <!-- 左侧展示 -->
      <div class="leftBox">
        <!-- 左侧title容器 -->
        <div class="leftTitleBox">
          <!-- 左侧title -->
          <h3>{{currFile.file_name}}</h3>
          <!-- 右侧button -->
          <div class="rightBtn">
            <span style="margin-right: 16px;"><i nz-icon nzType="double-left"
                nzTheme="outline"></i>&nbsp;&nbsp;上一个</span>
            <span>下一个&nbsp;&nbsp;<i nz-icon nzType="double-right" nzTheme="outline"></i></span>
          </div>
        </div>
        <!-- 左侧内容容器 -->
        <div class="leftContent">
          <!-- 左侧标签展示区 -->
          <div class="leftContentTag">
            <div class="leftTag" *ngFor="let data of fileListData.catalog">{{data.node_text}}</div>
          </div>
          <!--左侧内容展示-->
          <div class="pdfContent" *ngIf="fileType == 'pdf'">

            <app-diypdf ref="pdfDetail" [pdf_Size]="pdfSize" [pdf_Data]="pdfData" [openDraw]="isCanDraw"
              [highBlock]="highlight" class="flex_1" (updateHL)="HLChange($event)"
              (deletElementPoint)="deletElementPoint($event)" (deleteDrawRectList)="deleteDrawRectList($event)"
              (nextStep)="nextStep($event)"></app-diypdf>
            <!-- <nz-pagination [(nzPageIndex)]="current" [nzTotal]="50" [nzSize]="'small'" [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total>Total {{ total }} items</ng-template> -->
          </div>

          <div class="pdfContent" *ngIf="fileType == 'txt'">
            <app-diytxt [txt_Data]="pdfData" [openDraw]="isCanDraw" (updateTxt)="txtBlockChange($event)"
              [highBlock]="highlight"></app-diytxt>
          </div>
        </div>
      </div>
      <!-- <div (click)="getFileData()">测试</div> -->
      <!-- 右侧展示 -->
      <div class="rightBox">
        <!-- 右侧title容器 -->
        <div class="rightTitlebox">
          <h3>标注信息</h3>
        </div>
        <!-- 右侧内容容器 -->
        <div class="rightContent">
          <!--  *ngFor="let data of fileTagData.data" -->
          <!-- 标注选中区域 -->
          <div class="rightList" *ngFor="let item of fileTagData;let itemIndex = index">
            <!-- 标注选中区域头部 -->
            <div class="rightListTop">
              <img src="assets/images/icon_add.png" (click)="addBlock(itemIndex)"
                alt=""><span>{{item.label_name}}</span>
            </div>
            <!-- 标注选中区域内容 -->
            <div class="rightListContent clearfix" *ngFor="let item2 of item.values;let blockIndex = index">
              <span class="valueSpan" *ngIf="i ==0">value</span>
              <!-- 选中内容容器 -->
              <div class="valueBox">
                <img style="margin: 5px 20px 5px 8px; width: 16px; height: 16px;" src="assets/images/selects.png" alt=""
                  (click)="selectPdf(itemIndex,blockIndex)">
                <div class="valueBox_block">
                  <!-- <div> <span>大兴骏才2号私募证券投资基金基金</span> <span>大兴骏才2号私募证券投资基金基金</span></div> -->
                  <span class="SpanContent">{{getBlocksTxt(item2.blocks)}}</span>
                  <!-- <span>1111111111111111111111111111111111111111111111111111111111</span> -->
                </div>
                <!-- hover 显示 -->
                <div class="ShowBox">
                  <!--保存按钮 与编辑按钮互斥 -->
                  <span *ngIf="item2.isCanBox" class="addBtn" (click)="saveBlocks(itemIndex,blockIndex)"></span>
                  <!-- 编辑按钮 -->
                  <span *ngIf="!item2.isCanBox" class="editBtn" (click)="changeEdit(itemIndex,blockIndex)"></span>
                  <!-- 删除按钮 -->
                  <span class="deleteBtn" (click)="deleteBlock(itemIndex,blockIndex)"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 标签分析 -->
  <div *ngIf="dataStep==4" class="flex flex_1 data_table_box">
    <!-- 左侧内容区域 -->
    <div class="TagLeftBox">
      <div class="TagLeftTop">
        <h1>标签名称</h1>
      </div>
      <div style="padding: 20px 16px;">
        <!-- 搜索框 -->
        <nz-input-group style="width: 268px;" [nzSuffix]="suffixIconSearch">
          <input type="text" nz-input placeholder="请输入标签名称" [(ngModel)]="seekTagTwoValue" (ngModelChange)="seekTagTwo($event)"/>
        </nz-input-group>
        <ng-template #suffixIconSearch>
          <i nz-icon nzType="search"></i>
        </ng-template>
        <!-- 左侧标签区域 -->
        <div class="TagLeftListBox">
          <div class="TagLeftList " [ngClass]="{'pitchList': i == currTagResIndex }"
            *ngFor="let item of tagListForResult;let i = index" (click)="getAnalyzeLabel(i,item.label_id)">
            {{item.label_name}}</div>
        </div>
      </div>
    </div>
    <!-- 标签结果区域 -->
    <div class="TagCentreBox">
      <div class="TagCentreTop">
        <h1>标签结果</h1>
      </div>
      <div style="padding: 20px 0px 20px 16px;height: 95%;overflow-y: auto;">
        <div>
          <!-- 搜索框 -->
          <nz-input-group style="width: 220px;" [nzSuffix]="suffixIconSearch">
            <input type="text" nz-input placeholder="请输入文件名称" [(ngModel)]="seekContenValue" (ngModelChange)="seekContent($event)"/>
          </nz-input-group>
          <ng-template #suffixIconSearch>
            <i nz-icon nzType="search"></i>
          </ng-template>
          <!-- 右侧刷新复制 -->
          <div style="float: right;margin-right: 16px;">
            <!-- copy -->
            <div class="copyBox"><img src="assets/images/copy.png" alt=""></div>
            <!-- 刷新 -->
            <div class="refreshBox" (click)="refreshData()"><img src="assets/images/icon_refresh.png" alt=""></div>
          </div>
        </div>
        <!-- 数据展示 -->
        <div style="max-height: 98%;">
          <div class="TagCentreList" *ngFor="let item of analyzeLabelResult.label_result">
            <div class="flex flex_1 flex_column">
              <div style="margin-bottom: 8px; position: relative;">
                <p class="TagListTitle">文件名称</p><span class="TagListCentent">{{item. file_name}}</span>
              </div>
              <div *ngFor="let val of item.values">
                <div style="margin-bottom: 8px; position: relative;">
                  <p class="TagListTitle">标签取值</p><span class="TagListCentent">{{val.text}}</span>
                </div>
                <div style="margin-bottom: 8px; position: relative;">
                  <p class="TagListTitle">上下文</p><span class="TagListCentent">{{val.context}}</span>
                </div>
              </div>
            </div>
            <div class="hit_number_box" style="margin-right: 16px;">
              <div class="hit_number">{{item.hit_num}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签统计 -->
    <div class="TagStatistics ">
      <!-- 头部 -->
      <div class="TagStatisticsTop">
        <h1>标签统计<img src="assets/images/icon_refresh.png" alt=""></h1>
      </div>
      <!-- 数据展示区 -->
      <div class="TagStatisticsData">
        <div echarts [options]="pieChart" (chartInit)="onChartInit($event)" style="height: 100%;width:100%;"></div>
      </div>
      <!-- <div class="TagStatisticsTop">
        <h1>标签统计</h1>
      </div> -->
    </div>
  </div>

  <nz-modal [(nzVisible)]="isVisible" [nzWidth]='550' nzTitle="新建项目" [nzFooter]=null nzCentered
    (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
      <div>
        <div class="pro_model_box flex flex_column" *ngFor="let item of tagsList; let i = index ">
          <div class="data_model_msg">每个项目限制100个标签，每个标签最大长度支持50个字符。</div>
          <div *ngFor="let items of item.addTagsList;">
            <!-- .addTagsList; let i = index  -->
            <div style="position: relative;">
              <input nz-input class="data_model_tag_input" [ngClass]="{'borderRed':items.value.length === 50}"
                placeholder="请输入标签名称" [(ngModel)]="items.value" maxlength="50" />
              <span *ngIf="items.value.length === 50" class="TagHint">最大字符长度50</span>
            </div>

          </div>
          <div class="add_tag btn_hand" (click)="addTags(i)">
            <img src="assets/images/icon_add.png"> <span> 添加标签 </span>
          </div>
        </div>
        <div class="flex justify_center">
          <div class="modal_btn_confirm btn_hand" (click)="addTagsOk()">
            确定
          </div>
          <div class="modal_btn_cancel mgl8 btn_hand" (click)="handleCancel()">
            取消
          </div>
        </div>
      </div>
    </ng-container>
  </nz-modal>


  <!-- 上传文件页面 -->
  <nz-modal [(nzVisible)]="isAddFileVisible" [nzClosable]=false [nzWidth]='900' nzTitle="" [nzFooter]=null nzCentered
    (nzOnCancel)="cancelAdd()">
    <ng-container *nzModalContent>
      <div class="">
        <div class="add_header">
          <div class="title">上传 </div>
          <img src="assets/images/icon_cancel.png" alt="" (click)="cancelAdd()">
        </div>
        <div class="flex align_center" style="margin-top: 28px;margin-bottom: 12px;">
          <div class="add_file_btn" [ngClass]="{'add_file_btn_cnt': getIsCanRestart()}" (click)="restartAll()">重试所有
          </div>
          <div class="add_file_btn" [ngClass]="{'add_file_btn_cnt': getIsCanCancel()}" (click)="cancelAll()">取消所有</div>
          <div class="add_file_btn" (click)="deletaAll()">删除所有</div>
          <div class="data_model_msg">共上传 <span class="add_length_span">{{uploadFileList.length}}</span> 个文件</div>
        </div>

        <div class="add_file_box">
          <!-- <div *ngIf="uploadFileList.length == 0" class="no_file_data">
            <img src="assets/images/upload.png" alt="">
            <div class="mgb4"> 拖拽本地文件至此处，或<a>添加文件</a> </div>
            <div>（单次上传最多支持100个文件同时上传，单个文件大小不超过20M，总大小不超过2GB）</div>
          </div> -->
          <div style="height:100%;width: 100%;">
            <nz-table #uplaodFileListTable [nzData]="uploadFileList" [nzFrontPagination]="false" [nzSize]="'small'"
              [nzScroll]="{ y:'350px'}">
              <thead>
                <tr>
                  <th nzWidth="48%">名称</th>
                  <th nzWidth="12%">文件大小<img src="assets/images/descend.svg" alt="" class="th_sort_img"></th>
                  <th nzWidth="20%">状态</th>
                  <th nzWidth="20%">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of uplaodFileListTable.data; let i = index; " class="editable-row">
                  <td>
                    {{ data.file_name }}
                  </td>
                  <td>{{ data.fileSize }}MB</td>
                  <td style="padding-right: 20px;">
                    <div class="progress_box" *ngIf="data.status == 'running'">
                      <nz-progress [nzPercent]="data.percent" nzSize="small"></nz-progress>
                    </div>
                    <div class="txt_box" *ngIf="data.status == 'success'">
                      <img src="assets/images/icon_succ.png" alt="">
                      <div>上传成功</div>
                    </div>
                    <div class="txt_box" *ngIf="data.status == 'fail'">
                      <img src="assets/images/icon_fail.png" alt="">
                      <div>上传失败</div>
                    </div>
                  </td>
                  <td>
                    <a [ngClass]="{'nocan': data.status != 'fail' }" (click)="restart(i)">重试</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a [ngClass]="{'nocan': data.status != 'running' }" (click)="cancel(i)">取消</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a (click)="delete(i)">删除</a>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
        <!-- <div class="flex justify_center">
          <div class="modal_btn_confirm">
            确定
          </div>
          <div class="modal_btn_cancel mgl8">
            取消
          </div>
        </div> -->
      </div>

    </ng-container>
  </nz-modal>

  <!-- 删除标签的模态框 -->
  <nz-modal [(nzVisible)]="deleteTagShow" nzTitle="删除" [nzWidth]='400' [nzFooter]=null nzCentered
    (nzOnCancel)="deleteTagShut()">
    <ng-container *nzModalContent>
      <p>确定删除吗？</p>
      <div style="display: flex; justify-content: flex-end;">
        <button style="margin-right: 4px;" nz-button nzType="primary" nzDanger (click)="deleteTagOk()">确定</button>
        <button nz-button nzType="default" (click)="deleteTagShut()">取消</button>
      </div>
    </ng-container>
  </nz-modal>

  <!-- 删除标签的模态框 -->
  <nz-modal [(nzVisible)]="deleteFileShow" nzTitle="删除" [nzWidth]='400' [nzFooter]=null nzCentered
    (nzOnCancel)="deleteFileShut()">
    <ng-container *nzModalContent>
      <p>确定删除吗？</p>
      <div style="display: flex; justify-content: flex-end;">
        <button style="margin-right: 4px;" nz-button nzType="primary" nzDanger (click)="deleteFileOk()">确定</button>
        <button nz-button nzType="default" (click)="deleteFileShut()">取消</button>
      </div>
    </ng-container>
  </nz-modal>

  <!-- 删除s所有标签的模态框 -->
  <nz-modal [(nzVisible)]="deleteAllShow" nzTitle="" [nzWidth]='400' [nzFooter]=null nzCentered
    (nzOnCancel)="hideDeleteMode()">
    <ng-container *nzModalContent>
      <div class="model_header">
        <img src="assets/images/icon-waring.png" alt="">
        <div class="model_header_txt">确定要删除所有吗？</div>
      </div>
      <p class="model_msg">是否要删除所有上传的文件？</p>
      <div style="display: flex; justify-content: center;">
        <button nz-button nzType="primary" nzDanger (click)="deleteAllSubmit()"
          style="margin-right: 8px;background-color:#fff ;color: #252B3A;border: 1px solid #ADB0B8;">确定</button>
        <button nz-button nzType="default" (click)="hideDeleteMode()"
          style="background-color:#F66F6A ;color: #FFFFFF;">取消</button>
      </div>
    </ng-container>
  </nz-modal>

  <!-- 取消所有标签的模态框 -->
  <nz-modal [(nzVisible)]="cancelAllShow" nzTitle="" [nzWidth]='400' [nzFooter]=null nzCentered
    (nzOnCancel)="hideCancelMode()">
    <ng-container *nzModalContent>
      <div class="model_header">
        <img src="assets/images/icon-waring.png" alt="">
        <div class="model_header_txt">确定要取消所有吗？</div>
      </div>
      <p class="model_msg">是否要取消所有正在上传的文件？</p>
      <div style="display: flex; justify-content: center;">
        <button nz-button nzType="primary" nzDanger (click)="cancelAllSubmit()"
          style="margin-right: 8px;background-color:#fff ;color: #252B3A;border: 1px solid #ADB0B8;">确定</button>
        <button nz-button nzType="default" (click)="hideCancelMode()"
          style="background-color:#F66F6A ;color: #FFFFFF;">取消</button>
      </div>
    </ng-container>
  </nz-modal>

  <!-- 重试所有标签的模态框 -->
  <nz-modal [(nzVisible)]="restartAllShow" nzTitle="" [nzWidth]='400' [nzFooter]=null nzCentered
    (nzOnCancel)="hideRestartMode()">
    <ng-container *nzModalContent>
      <div class="model_header">
        <img src="assets/images/icon-waring.png" alt="">
        <div class="model_header_txt">确定要重试所有吗？</div>
      </div>
      <p class="model_msg">是否要重试所有上传失败的文件？</p>
      <div style="display: flex; justify-content: center;">
        <button nz-button nzType="primary" nzDanger (click)="restartAllSubmit()"
          style="margin-right: 8px;background-color:#fff ;color: #252B3A;border: 1px solid #ADB0B8;">确定</button>
        <button nz-button nzType="default" (click)="hideRestartMode()"
          style="background-color:#F66F6A ;color: #FFFFFF;">取消</button>
      </div>
    </ng-container>
  </nz-modal>